<template>
<!--  注册页面-->
  <div id="register" :style="bgImg">
    <el-card class="card" >
      <div slot="header" class="biaoti">注册</div>
      <el-form :model="user" :rules="registerRule" ref="registerForm" inline>
        <el-form-item label="账号" prop="account">
          <el-input v-model="user.account" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name" style="width: 210px;"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="密码" prop="password">
          <!--     @keypress.enter.native 按下回车键，调用注册方法     -->
          <el-input v-model="user.password" show-password
                    style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <!--     @keypress.enter.native 按下回车键，调用注册方法     -->
          <el-input v-model="user.password2" @keypress.enter.native="register" show-password
                    style="width: 180px;"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" @click="register">注册</el-button>

          <el-button type="text" @click="$router.push('/login')">已有账号？去登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "register",
  data(){
    return{
      user:{},
      bgImg:{
        backgroundImage:'url('+require('@/assets/zc.webp')
      },
      registerRule:{
        account: [{required: true,message:'请输入账号',trigger:'blur'}],
        name:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
        password:[ {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}],
        password2:[{required: true, message: '请再次输入密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.user.password) {
                callback(new Error('两次密码不一致！'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          },]
      },
    }
  },
  methods:{
    register() {
      // 前端表单验证
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 表单验证通过后，调用后端接口
          this.$axios.post('/api/user/register', this.user).then(res => {
            if (res.data.status === 1) {
              // 注册成功，调到登录页
              this.$router.push(this.redirect || '/login');
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          this.$message.error('请填写完整内容');
          return false;
        }
      })
    }
  }



}
</script>

<style scoped>
#register {
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  margin: 0;
}
.biaoti{
  font-size: 2em;
}
.card{
 width: 500px;
  margin: 150px auto;
  background-color: rgba(255,255,255,0.7);
}
</style>